<template>
    <div class="comment-box">
        <login></login>
        <div class="comment-top">
            <p class="text-2xl opacity-70 text-black">评论</p>
            <p class="mx-8 flex items-end text-sm">共{{commentCount}}评论</p>
        </div>
        <div class="comment-center">
            <n-avatar
                :size="60"
                :src="store.state.user.avatarUrl"
            />
            <n-input maxlength="140" show-count clearable :on-focus="isLogin" class="ml-8" @keyup.enter="invokeDoComment" v-model:value="cv"/>
        </div>
        <div class="comment-content">
            <div v-show="hotComments.length != 0">
                <p class="font-bold pb-2 border-b border-gray-400">热门评论</p>
                <comment-item v-for="(item, index) in hotComments" :key="index" :comment-data="item" :id="currentId" :comment-type="commentType" @refresh="refreshData"></comment-item>
            </div>
            <div>
                <p class="font-bold pb-2 border-b border-gray-400">最新评论</p>
                <comment-item v-for="(item, index) in comments" :key="index" :comment-data="item" :id="currentId" :comment-type="commentType" @refresh="refreshData"></comment-item>
            </div>
            <div class="flex items-center justify-center">
                <n-pagination v-model:page="page" :page-count="pageCount" :on-update:page="OnPageUpdate" show-quick-jumper/>
            </div>
        </div>
        <n-modal v-model:show="isLoadDing">
            <n-card style="width: 200px;" :bordered="false" size="huge">
                <div class="flex items-center justify-center">
                    <n-spin size="large" />
                </div>
            </n-card>
        </n-modal>
    </div>
</template>

<script>
import {NAvatar, NInput, NPagination, useMessage, NModal, NSpin, NCard} from 'naive-ui';
import {useStore} from "vuex";
import Login from "@/components/Login";
import CommentItem from "@/components/comment/CommentItem";
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {
    doComment,
    getCommentAlbum,
    getCommentMusic,
    getCommentPlayList,
    getHotComments,
    getMvComments, getVideoComments
} from "@/network/data/comment";
export default {
    name: "CommentOn",
    props: {
        id: String,
        commentCount: Number,
        commentType: Number
    },
    setup(props) {
        // 评论组件
        const TAG = "CommentOn.vue";
        const store = useStore();
        const message = useMessage();
        const commentOnInfo = reactive({
            page: 1,
            pageCount: 1,
            limit: 20,
            hotComments: [],
            comments: [],
            currentId: props.id,
            // 输入框 comment-value
            cv: '',
            isLoadDing: false
        })
        // 显示加载遮罩
        const beLoading = () => {
            commentOnInfo.isLoadDing = true;
            setTimeout(() => {
                commentOnInfo.isLoadDing = false;
            }, 500);
        }
        const isLogin = () => {
            if (store.state.user.isLogin === false) {
                store.commit('setLoginDialog', true);
            }
        }
        const init = () => {
            // 歌单评论
            if (props.commentType == 2) {
                commentOnInfo.currentId = props.id;
                commentOnInfo.page = 1;
                getCommentPlayList(props.id).then(res => {
                    console.log(res);
                    commentOnInfo.comments = res.data.comments;
                    let object = res.data.total / commentOnInfo.limit;
                    if (Number.isInteger(object)) {
                        commentOnInfo.pageCount = object;
                    } else {
                        commentOnInfo.pageCount = parseInt(object) + 1;
                    }
                })
                getHotComments(props.id, props.commentType).then(res => {
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 0) {
                // 歌曲评论
                commentOnInfo.currentId = props.id;
                commentOnInfo.page = 1;
                getCommentMusic(props.id).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    let object = res.data.total / commentOnInfo.limit;
                    if (Number.isInteger(object)) {
                        commentOnInfo.pageCount = object;
                    } else {
                        commentOnInfo.pageCount = parseInt(object) + 1;
                    }
                })
                // 精彩评论
                getHotComments(props.id, props.commentType).then(res => {
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 3) {
                // 专辑评论
                commentOnInfo.currentId = props.id;
                commentOnInfo.page = 1;
                getCommentAlbum(props.id).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    let object = res.data.total / commentOnInfo.limit;
                    if (Number.isInteger(object)) {
                        commentOnInfo.pageCount = object;
                    } else {
                        commentOnInfo.pageCount = parseInt(object) + 1;
                    }
                })
                getHotComments(props.id, props.commentType).then(res => {
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 1) {
                // mv评论
                commentOnInfo.currentId = props.id;
                commentOnInfo.page = 1;
                getMvComments(props.id).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    let object = res.data.total / commentOnInfo.limit;
                    if (Number.isInteger(object)) {
                        commentOnInfo.pageCount = object;
                    } else {
                        commentOnInfo.pageCount = parseInt(object) + 1;
                    }
                })
                getHotComments(props.id, props.commentType).then(res => {
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 5) {
                // 视频评论
                commentOnInfo.currentId = props.id;
                commentOnInfo.page = 1;
                getVideoComments(props.id).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    let object = res.data.total / commentOnInfo.limit;
                    if (Number.isInteger(object)) {
                        commentOnInfo.pageCount = object;
                    } else {
                        commentOnInfo.pageCount = parseInt(object) + 1;
                    }
                })
                getHotComments(props.id, props.commentType).then(res => {
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            }
        }
        // 页面发生改变
        const OnPageUpdate = (page) => {
    
            beLoading();
            commentOnInfo.page = page;
            if (page === 1) {
                init();
                return;
            }
            page -= 1;
            if (props.commentType == 2) {
                getCommentPlayList(props.id, page * 20).then(res => {
                    console.log(res);
                    commentOnInfo.comments = res.data.comments;
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 0) {
                getCommentMusic(props.id, page * 20).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 3) {
                getCommentAlbum(props.id, page * 20).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 1) {
                getMvComments(props.id, page * 20).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            } else if (props.commentType == 5) {
                getVideoComments(props.id, page * 20).then(res => {
                    commentOnInfo.comments = res.data.comments;
                    if (typeof(res.data.hotComments) == "undefined") {
                        commentOnInfo.hotComments = [];
                    } else {
                        commentOnInfo.hotComments = res.data.hotComments;
                    }
                })
            }
    
            window.scrollTo(0 , 0);
        }
        // 刷新数据
        const refreshData = () => {
            init();
        }
        onMounted(() => {
            watchEffect(() => {
                let currentId = props.id;
                init();
            })
        })
        // 评论歌单或者歌曲等等的输入框回车事件
        const invokeDoComment = () => {
            commentOnInfo.isLoadDing = true;
            doComment(1, props.commentType, props.id, '-1', commentOnInfo.cv).then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    message.success("评论成功");
                    commentOnInfo.cv = '';
                    setTimeout(() => {
                        refreshData();
                        commentOnInfo.isLoadDing = false;
                    }, 1000)
                } else {
                    message.warning("评论失败");
                }
            })
        }
        return {
            ...toRefs(commentOnInfo),
            store,
            isLogin,
            OnPageUpdate,
            refreshData,
            invokeDoComment
        }
    },
    components: {
        NAvatar,
        NInput,
        Login,
        CommentItem,
        NPagination,
        NModal,
        NSpin,
        NCard
    }
}
</script>

<style scoped lang="scss">
.comment-box {
    @apply my-16;
    .comment-top {
        @apply flex pb-4;
        color: #999999;
        border-bottom: 2px solid #c20c0c;
    }
    .comment-center {
        @apply flex my-6;
    }
}
</style>